<template>
    <div class="sidebar">
      <header>
        <div class="header_wrap">
          <div class="user_info" @click="show_user_info()">
            watermelonMan
          </div>
        </div>
        <div class="user_info_detail" v-show="user_info">
          <div class="img_wrap">
            <img src="../assets/images/avatar.jpg" alt="watermelonMan">
          </div>
          <div class="time_wrap">
            2017/03/14
          </div>
          <div class="logout_btn">
            <el-button type="primary" size="small">退出</el-button>
          </div>
        </div>
      </header>
      <main class="side_content">
        <div class="side_menu">
          <div class="side_box">
            <div class="logo_img_wrap">
            </div>
          </div>
          <router-link to="/main/chart" :class="{ select: isSelect }">图表</router-link>
          <router-link to="/main/form" :class="{ select: isSelect }">表单</router-link>
          <router-link to="/main/editor" :class="{ select: isSelect }">编辑</router-link>
          <router-link to="/main/table" :class="{ select: isSelect }">表格</router-link>
        </div>
        <router-view></router-view>
      </main>
      <footer>
        &copy;  2017 watermelonMan Admin
      </footer>
    </div>
</template>
<script>
export default {
  name: 'Sidebar',
  data () {
    return {
      user_info: false,
      isSelect: false
    }
  },
  created () {
    let mainUrl = this.$route.path
    switch (mainUrl) {
      case '/main/form':
        break
      case '/main/chart':
        break
      case '/main/editor':
        break
      case '/main/table':
        break
    }
  },
  methods: {
    show_user_info () {
      this.user_info = !this.user_info
    }
  }
}
</script>
<style lang="sass">
  @import "../assets/style/main.scss";
</style>
